<!-- 自定义顶部导航栏控件设置面板 -->
<template>
    <el-tabs modelValue="widget" stretch>
        <el-tab-pane :label="`${widget.widgetData.component.title}组件`" name="widget">
            <el-scrollbar>
                <!-- 选择类型 -->
                <custom-top-nav-type :widget="widget" />

                <!-- 导航名称 -->
                <custom-top-nav-name :widget="widget" />

                <el-collapse modelValue="1">
                    <el-collapse-item title="高级设置" name="1">
                        <layout-pane label="图标">
                            <si-image-picker
                                v-model="widget.widgetData.eles.customFeature.iconSrc"
                                :show-label="false"
                                type="image"
                            />
                        </layout-pane>
                    </el-collapse-item>
                </el-collapse>

                <!-- 点击事件 -->
                <custom-top-nav-click-event :widget="widget" />
                
                <!-- 元素可见设置 -->
                <row-element-visible :widget="widget" />
            </el-scrollbar>
        </el-tab-pane>

        <el-tab-pane label="组件样式" name="style">
            <el-scrollbar>
                <el-collapse modelValue="1">
                    <el-collapse-item title="基本设置" name="1">
                        <layout-pane label="颜色">
                            <si-color-picker
                                v-model="titleColor"
                                label="字体色"
                                show-alpha
                            />
                            <si-color-picker
                                v-model="titleBackgroundColor"
                                label="背景色"
                                show-alpha
                            />
                        </layout-pane>

                        <!-- 透明 -->
                        <el-divider></el-divider>
                        <si-opacity v-model="widget.widgetData.eles.customFeature.style.opacity" />
                    </el-collapse-item>
                </el-collapse>

                <template v-if="['2', '4'].includes(type)">
                    <el-collapse modelValue="1">
                        <el-collapse-item title="搜索框设置" name="1">
                            <!-- <layout-pane label="大小">
                                <si-input-number
                                    v-model="widget.widgetData.eles.customFeature.style.inputStyle.width"
                                    :min="0"
                                    label="宽度"
                                    unit="px"
                                />
                                <si-input-number
                                    v-model="widget.widgetData.eles.customFeature.style.inputStyle.height"
                                    :min="0"
                                    label="宽度"
                                    unit="px"
                                />
                            </layout-pane>

                            <el-divider></el-divider>
                            <layout-pane label="间距">
                                <si-input-number
                                    v-model="widget.widgetData.eles.customFeature.style.inputStyle['margin-left']"
                                    :min="0"
                                    label="距左"
                                    unit="px"
                                />
                            </layout-pane>

                            <el-divider></el-divider> -->
                            <layout-pane label="背景颜色">
                                <si-color-picker
                                    v-model="widget.widgetData.eles.customFeature.style.inputStyle['background-color']"
                                    show-alpha
                                />
                            </layout-pane>

                            <el-divider></el-divider>
                            <layout-pane label="文字提示">
                                <si-color-picker
                                    v-model="widget.widgetData.eles.customFeature.style.inputStyle.color"
                                    show-alpha
                                />
                            </layout-pane>

                            <!-- 透明 -->
                            <el-divider></el-divider>
                            <si-opacity v-model="widget.widgetData.eles.customFeature.style.inputStyle.opacity" />
                        </el-collapse-item>
                    </el-collapse>
                </template>

                <template v-if="['5'].includes(type)">
                    <el-collapse modelValue="1">
                        <el-collapse-item title="切换设置" name="1">
                            <layout-pane label="左边">
                                <si-color-picker
                                    v-model="widget.widgetData.eles.content[0].style.color"
                                    label="字体色"
                                    show-alpha
                                />
                                <si-color-picker
                                    v-model="widget.widgetData.eles.content[0].style['background-color']"
                                    label="背景色"
                                    show-alpha
                                />
                            </layout-pane>

                            <!-- 透明 -->
                            <si-opacity v-model="widget.widgetData.eles.content[0].style.opacity" />

                            <el-divider></el-divider>
                            <layout-pane label="右边">
                                <si-color-picker
                                    v-model="widget.widgetData.eles.content[1].style.color"
                                    label="字体色"
                                    show-alpha
                                />
                                <si-color-picker
                                    v-model="widget.widgetData.eles.content[1].style['background-color']"
                                    label="背景色"
                                    show-alpha
                                />
                            </layout-pane>

                            <!-- 透明 -->
                            <si-opacity v-model="widget.widgetData.eles.content[1].style.opacity" />
                        </el-collapse-item>
                    </el-collapse>
                </template>
            </el-scrollbar>
        </el-tab-pane>
    </el-tabs>
</template>

<script>
import { defineComponent, toRefs, computed } from 'vue'
import { useEditStore } from '@/store'
import LayoutPane from '@/components/setting-pane/layout-pane'
import {
    SiInputNumber,
    SiOpacity,
    SiImagePicker,
    SiColorPicker
} from '@/components/setting-pane/setting-item'
import { RowElementVisible } from '../../widget-setting-row'
import CustomTopNavType from './components/custom-top-nav-type'
import CustomTopNavName from './components/custom-top-nav-name'
import CustomTopNavClickEvent from './components/custom-top-nav-click-event'
export default defineComponent({
    name: 'CustomTopNavSetting',
    components: {
        LayoutPane,
        SiInputNumber,
        SiOpacity,
        SiImagePicker,
        SiColorPicker,
        RowElementVisible,
        CustomTopNavType,
        CustomTopNavName,
        CustomTopNavClickEvent
    },
    props: {
        widget: {
            type: Object,
            default: () => ({})
        }
    },
    setup(props) {
        const { widget } = toRefs(props)

        const editStore = useEditStore()

        const pageData = computed(() => editStore.pageData)

        const type = computed(() => widget.value.widgetData.eles.customFeature.type)

        const titleColor = computed({
            get: () => widget.value.widgetData.eles.customFeature.style.color,
            set: val => {
                widget.value.widgetData.eles.customFeature.style.color = val
                pageData.value.customFeature.titleColor = val
            }
        })

        const titleBackgroundColor = computed({
            get: () => widget.value.widgetData.eles.customFeature.style['background-color'],
            set: val => {
                widget.value.widgetData.eles.customFeature.style['background-color'] = val
                pageData.value.customFeature.titleBackgroundColor = val
            }
        })

        return {
            widget,
            pageData,
            type,
            titleColor,
            titleBackgroundColor
        }
    }
})
</script>
